<template>
    <div id="firstX" v-cloak style="overflow:auto;height:681px;">
        <!-- 轮播图 -->
        <div class="carouselMap">
            <mt-swipe :auto="0" :show-indicators="false"  style="height:414px;width:414px;position: relative;" class="firstImg" :defaultIndex="defaultIndex" @change="handleChange">
                <mt-swipe-item ref="swipe" v-for="item in firstMap" :key="item.id"><img :src="item" alt=""></mt-swipe-item>  
            </mt-swipe>
            <!-- 轮播页数 -->
            <span class="lunPage">{{defaultIndex}}/{{this.firstMap.length}}</span>
        </div>
     <!-- 详情 -->
     <div class="details">
         <span>{{dates.price}}</span>
        <span>{{dates.title}}</span>
     </div>
    <!-- 详情参数 -->
        <div class="parameter">
            <ul >
                <li style="position:relative;" @click="testpopup()">
                    <span class="parameterLeft">选择</span>
                    <span class="parameterRight">颜色选择</span>
                    <span class="iconfont  icon-you" style="position: absolute;left: 95%;width: 50px;height: 50px;top: 27%;display: inline-block;"></span>

                    <div  v-for="item in firstMap" :key="item.id" style="margin:10px 0 0 70px; " class="smallImg">
                        <img :src="item" style="width:26px;">
                    </div>
                    <span class="parameterColor">共15种颜色分类可选</span>
                </li>
                 <li style="clear:both;">
                    <span class="parameterLeft">发货</span>
                    <span class="parameterRight">上海</span>
                   <span class="expressPackage">快递：快递包邮</span>
                   <span class="monthlySales">月销200+</span>
                </li>
                <li @click="guarantee()">
                    <span class="parameterLeft">保障</span>
                    <span class="parameterRight">15天退货·1次破损补寄·运硷公益宝贝</span>
                    <!-- <span>15天退货&nbsp;运险费</span> -->
                </li>
                <li @click="parameterp()">
                    <span class="parameterLeft">参数</span>
                    <span class="parameterRight">品牌&nbsp; 型号...</span>
                </li>
            </ul>
            <!-- 弹出框 -->
            <div style="position: relative;">
                <mt-popup position="bottom"  v-model="popupVisible" class="parameterColorPopup">
                  <div class="userPhoto">
                      <img src="../assets/img/glass1.png" alt="">
                  </div>
                  <span style="float:left;margin-top:-52px;color:red;font-size:18px;">{{dates.price}}</span>
                  <span style="float:left;margin:-26px 0 0 2px;font-size:12px;">请选择：颜色分类</span>
                  <span style="position:absolute;    top: 1%;right: 3%;color: #9999;font-size: 20px;" @click="parameterClosedPopup()">X</span>
                  <span style="border:1px solid #9999;margin:5px 5px; display: inline-block;width: 97%;"></span>
                  <span style="font-size: 17px;font-weight: 100;margin-left:16px;">颜色分类</span>
                  <div class="pagesColor">            
                        <ul style="width:93%;">
                            <li  v-for="items in color" :key="items.id">{{items}}</li>
                        </ul>
                        <span style="font-size: 17px;font-weight: 100;margin-left:16px;">购买数量</span>
                        <div style="float:right; margin-right:12px;" class="buyNum">
                                <button style="background:#FBFBFB;border:1px solid #F6F6F6;color:#D6D6D6;outline:none;" @click="jia()">+</button>
                                <span>{{num}}</span>
                                <button style="background:#F6F6F6;border:1px solid #F6F6F6;color:#ABABAB;outline:none;" @click="jian()">-</button>  
                        </div>
                  </div>
            <div class="footer1">
                <mt-tabbar >
                <mt-tab-item id="me" style="margin-bottom:-7px; margin-left:-65px; width:414px;">
                    <span class="parameterAddCar">加入购物车</span>
                    <span class="parameterBuy">立即购买</span>
                </mt-tab-item>
                </mt-tabbar>

         </div>     
    </mt-popup>
            
            </div>
           

<div class="gitee" style="position:relative;">
    <mt-popup v-model="popupVisible1" position="bottom" class="giteeContent">
        <span style="margin:10px auto 0;display:block;width:77px;font-size:19px;">基础服务</span>
        <span style="margin:48px auto 0;display:block;width:77px;font-size:19px;text-align:center;">其他</span>
        <div style="margin:10px 0 0 31px;">
        <ul>
            <li v-for="gitees in basicServices" :key="gitees.id" class="lists">{{gitees}}</li>
        </ul>
        </div>
        <span style="color: white;background: rgb(255, 134, 0);font-size: 23px;position: absolute;bottom: 0%;width: 400px;margin: 0 7px;height: 45px;text-align: center;border-radius: 10px;line-height: 45px;"@click="complete()">完成</span>
    </mt-popup>

</div>
 
<div class="parameters">
     <mt-popup v-model="popupVisible2" position="bottom" class="giteeContent">
        <span style="margin:10px auto 0;display:block;width:77px;font-size:19px;">产品参数</span>
        <div style="overflow-y:scroll;height:76vh;">
            <table class="bases" >
                <tr>
                    <td>
                        <span class="parametersLeft" >品牌</span>
                    </td>
                    <td>
                       <span class="parametersRight" style="margin-left:25px;">{{Product.brand}}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="parametersLeft" >型号</span>
                    </td>
                    <td>
                       <span class="parametersRight" style="margin-left:25px;">{{Product.model}}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="parametersLeft" >材质</span>
                    </td>
                    <td>
                       <span class="parametersRight" style="margin-left:25px;">{{Product.textureOfMaterial}}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="parametersLeft" >风格</span>
                    </td>
                    <td>
                       <span class="parametersRight" style="margin-left:25px;">{{Product.style}}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="parametersLeft" >产地</span>
                    </td>
                    <td>
                       <span class="parametersRight" style="margin-left:25px;">{{Product.PlaceOfOrigin}}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="parametersLeft" >流行元素</span>
                    </td>
                    <td>
                       <span class="parametersRight" style="margin-left:25px;">{{Product.popularElements}}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="parametersLeft" >颜色分类</span>
                    </td>
                    <td>
                       <span class="parametersRight" style="margin-left:25px;display:block;">{{Product.color}}</span>
                    </td>
                </tr>
                 <tr>
                    <td>
                        <span class="parametersLeft" >毛重</span>
                    </td>
                    <td>
                       <span class="parametersRight" style="margin-left:25px;">{{Product.grossWeight}}</span>
                    </td>
                </tr>
                 <tr>
                    <td>
                        <span class="parametersLeft" >直径</span>
                    </td>
                    <td>
                       <span class="parametersRight" style="margin-left:25px;">{{Product.diameter}}</span>
                    </td>
                </tr>
                 <tr>
                    <td>
                        <span class="parametersLeft" >深度</span></span>
                    </td>
                    <td>
                       <span class="parametersRight" style="margin-left:25px;">{{Product.deep}}</span>
                    </td>
                </tr>
                 <tr>
                    <td>
                        <span class="parametersLeft" >锅底类型</span>
                    </td>
                    <td>
                       <span class="parametersRight" style="margin-left:25px;">{{Product.potBttom}}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="parametersLeft" >适用人群</span>
                    </td>
                    <td>
                       <span class="parametersRight" style="margin-left:25px;">{{Product.people}}</span>
                    </td>
                </tr>
            </table>



        </div>

       
      
        <span style="color: white;background: rgb(255, 134, 0);font-size: 23px;position: absolute;bottom: 0%;width: 400px;margin: 0 7px;height: 45px;text-align: center;border-radius: 25px;line-height: 45px;"@click="complete1()">完成</span>
    </mt-popup>
</div>
                 
              
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
              firstMap:[],
              defaultIndex:1,
              dates:'',
              popupVisible:false,
              popupVisible1:false,
              popupVisible2:false,
              colour:[],
              color:[],
              basicServices:[],
              Product:"",
              num:1,
              brand:"",
              model:"",
              coloras:""

            }
        },
        methods:{
            //轮播图
              handleChange(index){
                  this.defaultIndex=index;
                    if(index<=0){
                        this.defaultIndex=this.firstMap.length;
                    }else if(this.defaultIndex<=1){
                         this.defaultIndex=1;
                    }
               },
               //弹出框
               testpopup(){
                   this.popupVisible=true;
               },
               parameterClosedPopup(){
                   this.popupVisible=false;
               },
               //数量加减
               jia(){
                this.num++;
               },
               jian(){
                   if(this.num<=1){
                       this.num=1;
                   }else{
                       this.num--;
                   }
                
               },
               //保障弹框
               guarantee(){
                   this.popupVisible1=true;
               },
             complete(){
                 this.popupVisible1=false;
             },
             //参数弹框
             parameterp(){
                 this.popupVisible2=true;
             },
             complete1(){
                 this.popupVisible2=false;
             }

        },
        mounted(){
            this.$http.get('/src/DetailsPage.json').then((res)=>{
                console.log(res.data.first.Product);
              this.firstMap=res.data.fourth.imgs;

              this.dates=res.data.fourth;
              this.color=res.data.fourth.guarantee.color;
              this.basicServices=res.data.fourth.guarantee.basicServices;
              this.Product=res.data.fourth.Product;
            
            })
        },
        
    }
</script>

<style lang="less" scoped>
  [v-cloak] {
        display: none !important;
       
    }
.firstImg img{
    width: 100%;
    height: 100%;
   
}
.lunPage{
        display: inline-block;
        border-radius: 45%;
        width: 44px;
        background: #7D726E;
        text-align: center;
        height: 29px;
        line-height: 29px;
        color: white;
        opacity: 0.5;
        font-size: 15px;
        position: absolute;
        top: 50%;
        left: 86%;
}
.details{
 background: wheat;
 margin: 5px 5px 0px 5px;
 border-radius:10px;
}
.details>span:first-child{
   
    display: inline-block;
    width: 100%;
    color: red;
    font-size: 20px;
}
.details>span:last-child{
    font-size: 21px;
    display: inline-block;
    margin-top: 6px;
}
.parameter{
    margin: 5px 5px 0px 5px;
    background: wheat; 
    overflow-x:hidden ;
}
.parameter ul{
    margin: 0;
    padding: 0;
}
.parameter ul li{
    list-style: none;
    margin-top: 14px;
    cursor: pointer;
}
.parameterLeft{
    color: #999999;
    font-size: 21px;
    margin-left: 12px;
    font-weight: 100;

}
.parameterRight{
     margin-left:17px;
     font-size: 19px;
     font-weight: 100;
}
.smallImg img{
float: left;
}
.parameterColor{
    background: #F2F2F2;
     border-radius: 20px;
     margin-left: 18px;
     display: inline-flex;
     margin-top: 3px;
     color:#999999 ;
     height: 23px;
     width: 157px;
     padding-left: 4px;
     line-height: 23px;
}
.expressPackage{
    font-size: 12px;
    margin-left: 12px;
}
.monthlySales{
    font-size: 12px;
    margin-left: 95px;
    color:#999999 ;
}
.parameterColorPopup{
    width: 100%;
    height: 650px;
    border-radius: 18px 18px 0 0;
    
}
.userPhoto{
    width: 100px;
    height: 100px;
    img{
        width: 100%;
        height: 100%;
        margin: 9px;
        float: left;
    }
}
.pagesColor{
    height: 415px;
    overflow-y:scroll ;
}
.pagesColor ul li{
list-style: none;
display: inline-block;
border-radius: 10px 10px 10px 10px;
background: #9999;
padding: 0 12px;
font-size: 14px;
font-weight: 100;
height: 26px;
line-height: 26px;
margin:14px 24px 12px 21px;
}
.buyNum button{
    height: 24px;
    line-height: 24px;
    width: 24px;
    text-align: center;
    font-size: 18px;
}
.buyNum span{
    height: 24px;
    line-height: 24px;
    width: 24px;
    text-align: center;
   background:#F6F6F6;
   border:1px solid #F6F6F6; 
}
.parameterAddCar{
        background: #FFC000;
        width: 41%;
   
    margin-left: 66px;
    height: 71px;
    color: white;
    font-size: 20px;
    line-height: 71px;
    display: inline-block;
    border-radius: 10px 0 0 10px;
}
.parameterBuy{
    background: #FE5A09;
        width: 41%;
   
    margin-left: -4px;
    height: 71px;
    color: white;
    font-size: 20px;
    line-height: 71px;
    display: inline-block;
    border-radius:0 10px 10px 0;
}
.giteeContent{
    width: 100vw;
    height: 650px;
    border-radius: 18px 18px 0 0;
}
.lists{
    color:#999999;
    font-size: 20px;
}
.parametersLeft{
    color: #9999;
}
.parametersRight{
    margin-left: 10px;
}
.parametersDiv{
margin: 30px 0px 25px 31px;
}
.bases{
    margin:10px 0 0 10px;
}
.bases tr{
    display: block;
    padding: 7px 0;
    margin: 0 12px;
    font-size:15px ;
}
.bases tr td:nth-child(1){
       width:22vw;
    color: #A9A9A9;
}
.bases tr td:nth-child(2){
    margin-left: 12px;
}
</style>